<template>
  <div class="other">
      <div id="map"></div>
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/map/js/china'
import 'echarts/extension/bmap/bmap'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/effectScatter'
import 'echarts/lib/chart/scatter'
export default {
  methods: {
    initMap () {
      const myChart = echarts.init(document.getElementById('map'))
      var option = {}
      var data = [
        { name: '新乡', value: 200 },
        { name: '青岛', value: 42 },
        { name: '上海', value: 26 },
        { name: '威海', value: 51 },
        { name: '承德', value: 8 },
        { name: '宁波', value: 13 },
        { name: '葫芦岛', value: 6 },
        { name: '太原', value: 40 },
        { name: '深圳', value: 10 },
        { name: '大连', value: 23 },
        { name: '西安', value: 83 },
        { name: '潍坊', value: 13 },
        { name: '南京', value: 2 },
        { name: '无锡', value: 16 },
        { name: '焦作', value: 34 },
        { name: '北京', value: 190 },
        { name: '衡水', value: 20 },
        { name: '杭州', value: 26 },
        { name: '淄博', value: 2 },
        { name: '安阳', value: 100 },
        { name: '开封', value: 56 },
        { name: '济南', value: 14 },
        { name: '温州', value: 1 },
        { name: '邯郸', value: 10 },
        { name: '兰州', value: 18 },
        { name: '天津', value: 43 },
        { name: '郑州', value: 324 },
        { name: '哈尔滨', value: 5 },
        { name: '聊城', value: 20 },
        { name: '唐山', value: 13 },
        { name: '平顶山', value: 96 },
        { name: '邢台', value: 23 },
        { name: '德州', value: 42 },
        { name: '荆州', value: 5 },
        { name: '宜昌', value: 3 },
        { name: '洛阳', value: 53 },
        { name: '石家庄', value: 24 },
        { name: '莱芜', value: 3 },
        { name: '常德', value: 2 },
        { name: '保定', value: 1 },
        { name: '湘潭', value: 1 },
        { name: '金华', value: 2 },
        { name: '岳阳', value: 5 },
        { name: '长沙', value: 15 },
        { name: '廊坊', value: 5 },
        { name: '菏泽', value: 6 },
        { name: '合肥', value: 9 },
        { name: '武汉', value: 25 },
        { name: '漯河', value: 9 },
        { name: '濮阳', value: 180 },
        { name: '信阳', value: 56 },
        { name: '许昌', value: 10 }
      ]

      var geoCoordMap = {
        新乡: [113.88, 35.30],
        青岛: [120.33, 36.07],
        上海: [121.48, 31.22],
        威海: [122.1, 37.5],
        承德: [117.93, 40.97],
        宁波: [121.56, 29.86],
        葫芦岛: [120.836932, 40.711052],
        太原: [112.53, 37.87],
        深圳: [114.07, 22.62],
        大连: [121.62, 38.92],
        西安: [108.95, 34.27],
        潍坊: [119.1, 36.62],
        南京: [118.78, 32.04],
        无锡: [120.29, 31.59],
        焦作: [113.21, 35.24],
        北京: [116.46, 39.92],
        衡水: [115.72, 37.72],
        杭州: [120.19, 30.26],
        淄博: [118.05, 36.78],
        安阳: [114.35, 36.1],
        开封: [114.35, 34.79],
        济南: [117, 36.65],
        温州: [120.65, 28.01],
        邯郸: [114.47, 36.6],
        兰州: [103.73, 36.03],
        天津: [117.2, 39.13],
        郑州: [113.65, 34.76],
        哈尔滨: [126.63, 45.75],
        聊城: [115.97, 36.45],
        唐山: [118.02, 39.63],
        平顶山: [113.29, 33.75],
        邢台: [114.48, 37.05],
        德州: [116.29, 37.45],
        荆州: [112.239741, 30.335165],
        宜昌: [111.3, 30.7],
        洛阳: [112.44, 34.7],
        石家庄: [114.48, 38.03],
        莱芜: [117.67, 36.19],
        常德: [111.69, 29.05],
        保定: [115.48, 38.85],
        湘潭: [112.91, 27.87],
        金华: [119.64, 29.12],
        岳阳: [113.09, 29.37],
        长沙: [113, 28.21],
        廊坊: [116.7, 39.53],
        菏泽: [115.480656, 35.23375],
        合肥: [117.27, 31.86],
        武汉: [114.31, 30.52],
        漯河: [114.03, 33.58],
        濮阳: [115.04, 35.77],
        信阳: [114.08, 32.12],
        许昌: [113.83, 34.02]
      }

      var convertData = function (data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return res
      }
      option = {
        tooltip: {
          trigger: 'item'
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [{
              featureType: 'water',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            }, {
              featureType: 'land',
              elementType: 'all',
              stylers: {
                color: '#f3f3f3'
              }
            }, {
              featureType: 'railway',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            }, {
              featureType: 'highway',
              elementType: 'all',
              stylers: {
                color: '#fdfdfd'
              }
            }, {
              featureType: 'highway',
              elementType: 'labels',
              stylers: {
                visibility: 'off'
              }
            }, {
              featureType: 'arterial',
              elementType: 'geometry',
              stylers: {
                color: '#fefefe'
              }
            }, {
              featureType: 'arterial',
              elementType: 'geometry.fill',
              stylers: {
                color: '#fefefe'
              }
            }, {
              featureType: 'poi',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            }, {
              featureType: 'green',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            }, {
              featureType: 'subway',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            }, {
              featureType: 'manmade',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            }, {
              featureType: 'local',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            }, {
              featureType: 'arterial',
              elementType: 'labels',
              stylers: {
                visibility: 'off'
              }
            }, {
              featureType: 'boundary',
              elementType: 'all',
              stylers: {
                color: '#fefefe'
              }
            }, {
              featureType: 'building',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            }, {
              featureType: 'label',
              elementType: 'labels.text.fill',
              stylers: {
                color: '#999999'
              }
            }]
          }
        },
        series: [{
          name: '散点',
          type: 'scatter',
          coordinateSystem: 'bmap',
          data: convertData(data),
          symbolSize: function (val) {
            return val[2] / 10
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: 'purple'
            }
          }
        },
        {
          name: 'Top 5',
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          data: convertData(data.sort(function (a, b) {
            return b.value - a.value
          }).slice(0, 10)),
          symbolSize: function (val) {
            return val[2] / 10
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'left',
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: 'purple',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          zlevel: 1
        }

        ]
      }
      myChart.setOption(option)
    }
  },
  mounted () {
    this.initMap()
  }
}
</script>

<style lang="less" scoped>
#map{
  width: 100%;
  height: 100%;
  background-color: white;
}
.other{
  width: 100%;
  height: 100%;
}
</style>
